<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-+y+krhFR0UcDYh1BimjL71GifENdMrMw3mJIteOyhJC1MgLzPCCitjqUa9+5OI/k"
      crossorigin="anonymous"
    ></script>
    <script src="todo.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Todo清单</h1>
          <p class="lead">zen of todo</p>

          <div class="row" id="registerPage" style="display: none">
            <div class="card">
              <div class="card-header">
                <h2>注册新用户</h2>
              </div>
              <div class="card-body">
                <form>
                  <div class="form-group">
                    <label for="">用户名</label>
                    <input
                      type="text"
                      class="form-control"
                      id="username"
                      placeholder="用于登录的名称，且独一无二！"
                    />
                  </div>
                  <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" />
                  </div>
                  <div class="form-group">
                    <label for="name">昵称</label>
                    <input type="text" class="form-control" id="nickname" />
                  </div>
                  <a class="btn btn-primary" onclick="register()">注册</a>
                </form>
              </div>
            </div>
          </div>
          <div class="row" id="loginPage" style="display: none">
            <form style="padding: 25px auto">
              <div class="form-group">
                <label for="">用户名</label>
                <input type="text" class="form-control" id="usernameL" />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="passwordL" />
              </div>
              <a class="btn btn-primary" onclick="login()">登录</a>
              <a class="btn btn-primary" onclick="showRegister()">注册</a>
            </form>
          </div>
          <div class="row" id="todoPage" style="display: none">
            <form class="box">
              <div class="form-group">
                <label for="title">标题</label>
                <input type="text" class="form-control" id="title" />
              </div>
              <div class="form-group">
                <label for="description">描述</label>
                <textarea class="form-control" id="description"></textarea>
              </div>
              <div class="form-group">
                <label for="priority">优先级</label>
                <select id="priority" class="form-control">
                  <option value="normal">一般</option>
                  <option value="important">重要</option>
                  <option value="crucial">至关重要</option>
                </select>
              </div>
              <a class="btn btn-primary" onclick="addTodo()">新待办</a>
            </form>
            <div id="todo"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
